<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_页面固定广告条</title>
    <style>
        .top{
            height: 120px;
            width: 100vw;
            color: white;
            background-color: #5AA4AE;
            font-size: 30px;
            position: fixed;
            top:0;
        }
        .main{
            margin-top: 130px;
        }
        .left{
            width: 60px;
            height: 200px;
            left: 20px;
            background-color: #FFF799;
            position: fixed;
            top: 300px;
        }
        .right{
            width: 60px;
            height: 200px;
            background-color: #F35336;
            position: fixed;
            top: 300px;
            right: 20px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部广告条</div>
<div class="left">我是左侧广告条</div>
<div class="right">我是右侧广告条</div>
<div class="main">
    我是主题内容 lorem*50 TAB补齐
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dolor ex, fuga hic odit officiis recusandae
        ut veniam! Dignissimos eaque eius fuga odit veniam? Cupiditate itaque nemo vel veniam voluptatum!
    </div>
    <div>A beatae corporis doloremque doloribus in, magni, non odio officia praesentium quod soluta sunt temporibus
        voluptate? Accusantium doloremque ea iusto nisi odit, perferendis possimus quam quis quo ut. Illo, nam!
    </div>
    <div>Aliquid delectus dolor doloribus exercitationem impedit, labore perspiciatis veritatis. Alias amet delectus
        dolorem ducimus fugit incidunt molestiae mollitia natus obcaecati officia perferendis porro, quam quia repellat
        reprehenderit suscipit tempora ullam?
    </div>
    <div>Ad alias aliquid amet asperiores consequuntur deleniti deserunt dignissimos dolorum earum eius fugit id illo,
        ipsa laboriosam minus odit porro quas quisquam, quos similique suscipit veritatis vero vitae voluptas
        voluptatum.
    </div>
    <div>Commodi distinctio mollitia quos repellendus ut. Dolor enim ex possimus sequi soluta ullam ut vero. Aut autem
        consectetur cum, debitis enim eos facilis iusto mollitia nulla quia quos sit tempore?
    </div>
    <div>Amet autem consectetur dignissimos distinctio est eveniet ex expedita fugiat harum illo in ipsam itaque, labore
        laboriosam nesciunt nisi nobis provident quas quibusdam quod quos ratione rem repellendus repudiandae soluta.
    </div>
    <div>Labore quas repellat velit. Earum eligendi exercitationem, facere incidunt obcaecati officia quidem. Ab
        accusantium architecto deleniti dignissimos esse est expedita inventore magnam, nihil quidem reiciendis
        repellendus sunt suscipit vitae voluptates?
    </div>
    <div>A, adipisci consequuntur deserunt dolor dolorem ea error ex exercitationem fugiat illo incidunt nam
        necessitatibus nobis non officia omnis praesentium quas quia quis quo quos sint soluta temporibus tenetur
        voluptas!
    </div>
    <div>Ad doloribus eveniet voluptatum. Accusamus aliquam, animi beatae deleniti ea eos facilis, fuga harum iste
        maiores nobis non nulla officia possimus quod repellendus repudiandae soluta tempora tenetur voluptatibus!
        Cumque, tempore.
    </div>
    <div>Accusamus aperiam cupiditate debitis distinctio dolores earum eos ex expedita fugiat harum illum libero maiores
        necessitatibus neque nihil officiis omnis porro, possimus quas quidem quod reiciendis reprehenderit tempore
        voluptas voluptate!
    </div>
    <div>Aliquid consectetur, consequatur debitis delectus dignissimos dolorem doloremque dolores eaque earum eos iure
        laboriosam, nam, natus neque nisi quas quibusdam quos rem repellendus sequi sit suscipit tempore temporibus
        ullam voluptatum.
    </div>
    <div>At eaque explicabo minima nam neque provident quam repudiandae sunt totam voluptatibus. Accusamus beatae,
        corporis cum delectus deleniti dolor et eveniet ex explicabo incidunt magnam modi obcaecati quae soluta ut!
    </div>
    <div>Alias aperiam assumenda cum cumque dignissimos dolorem doloremque earum error facilis id illo ipsam magnam modi
        molestias, nam nisi nulla perferendis possimus quo reiciendis rerum soluta, tempore veritatis voluptates
        voluptatibus.
    </div>
    <div>Aliquam consectetur dicta earum esse exercitationem fuga laudantium minus nemo quod quos rerum sequi
        voluptatem, voluptatibus! Aperiam at est ipsam iste mollitia non perferendis. Aperiam autem iure labore neque
        quo.
    </div>
    <div>Alias architecto assumenda facilis fuga fugiat, nemo similique ut? Iste minus obcaecati reiciendis tempore.
        Aliquam, aspernatur consequatur corporis ducimus harum minima natus quae quaerat sequi temporibus. Commodi eaque
        sequi voluptatum.
    </div>
    <div>Aperiam aut debitis, delectus dignissimos dolorem ducimus eligendi enim error eum eveniet facere fugit ipsa
        iste itaque iusto, laborum magnam neque odit perspiciatis quam saepe sapiente tempora voluptates! Earum, vel?
    </div>
    <div>Ipsum, neque, quam. A accusamus accusantium ad alias aliquid aperiam architecto at distinctio ea,
        exercitationem expedita explicabo facilis id illo maiores minus natus odit praesentium ratione tempore vel
        veniam, voluptate!
    </div>
    <div>Debitis iste rerum sapiente ut. Autem consectetur cumque, ea facere harum labore laboriosam maxime modi
        molestias, odit, quia sunt tempora unde! Accusantium ea fuga incidunt iure iusto laboriosam neque, provident?
    </div>
    <div>Adipisci, aut cumque dicta dolore magnam nostrum voluptatibus! Adipisci, alias assumenda autem consequatur
        deleniti distinctio earum hic iste laboriosam laudantium minima nobis non omnis perspiciatis quaerat, quibusdam
        quo ratione reprehenderit.
    </div>
    <div>Blanditiis debitis deserunt inventore omnis provident recusandae sequi veniam! Animi beatae dolores ducimus
        fugit modi nam nobis nulla perspiciatis temporibus! Impedit numquam odit pariatur quas reiciendis repellendus
        tempora tempore temporibus.
    </div>
    <div>Consequuntur expedita, necessitatibus non quam quibusdam quis quo. Aperiam consectetur delectus, dicta dolor
        eum expedita facilis illum impedit, natus odit quaerat quis ullam! Ab exercitationem pariatur praesentium
        provident soluta suscipit.
    </div>
    <div>Aliquam animi asperiores blanditiis consequuntur distinctio ducimus eius error excepturi expedita fugit hic
        incidunt iure labore laudantium minima mollitia, nihil obcaecati placeat quia quo quod rem rerum sed totam,
        voluptas.
    </div>
    <div>Asperiores corporis dolorem ea eligendi sequi! Architecto eveniet fugiat inventore numquam quisquam, quo
        reiciendis veritatis? Ad asperiores, beatae ducimus enim est eveniet modi nemo obcaecati officiis placeat quae
        reprehenderit similique!
    </div>
    <div>Aliquid dolor molestias nemo nulla rem vel voluptatem. Ab consequuntur dolorum iusto rem sed sint unde!
        Accusantium aliquam atque distinctio ducimus ea nostrum optio sapiente, temporibus ullam unde! Eius,
        reprehenderit!
    </div>
    <div>Doloribus ea earum provident quo tenetur? Accusamus accusantium corporis cum deserunt distinctio, ducimus eius
        eos ex explicabo impedit iure maxime obcaecati odio pariatur placeat sit tempora tenetur ut velit voluptatem.
    </div>
    <div>Amet aperiam dolorem ducimus eligendi est et exercitationem illum, iusto laudantium minima non nostrum
        obcaecati officia officiis perferendis quia repellat repudiandae rerum similique veniam! Ex explicabo quisquam
        totam ullam velit.
    </div>
    <div>Aliquam assumenda commodi earum et excepturi expedita ipsa labore laudantium modi natus nemo quaerat quibusdam
        repellendus sed similique, sunt tenetur veritatis voluptate voluptatem voluptatum. Cum, eum, illo! Debitis, est,
        facere.
    </div>
    <div>Deleniti ipsam iusto laboriosam perferendis porro. Deleniti eius inventore magnam maiores non reiciendis
        temporibus veniam! At cumque enim eos eum excepturi laboriosam mollitia obcaecati pariatur possimus! Et ipsam
        perferendis soluta?
    </div>
    <div>Beatae blanditiis eaque, eius incidunt labore laboriosam molestiae nulla, placeat sapiente suscipit ullam
        voluptate voluptatem voluptatum? Blanditiis ducimus eius eligendi est, eveniet facilis in iste, mollitia quae
        quas reiciendis voluptatibus.
    </div>
    <div>A asperiores aut autem debitis eius et eum exercitationem, facilis fugit ipsum itaque libero magnam minima
        minus nemo nesciunt nisi non praesentium quas quasi, quibusdam repellendus sequi velit voluptates voluptatum.
    </div>
    <div>Itaque pariatur, similique. Dicta nemo possimus sapiente sed? Consequatur culpa dolor, doloremque doloribus eos
        eum fugiat ipsa ipsum magni maxime natus neque non nostrum odit perspiciatis quisquam ratione recusandae,
        tempora.
    </div>
    <div>Enim error eveniet ex itaque molestias nihil obcaecati, odio odit omnis quasi quia quisquam repellat
        reprehenderit repudiandae saepe unde veniam voluptatum. Alias asperiores delectus eum molestias odio quia
        similique temporibus.
    </div>
    <div>Accusamus blanditiis consequatur culpa deserunt dolores eaque eius et eveniet excepturi facilis iste labore
        laborum laudantium libero magnam modi, molestias, necessitatibus nobis non nulla officia, pariatur quos
        repudiandae rerum voluptatum.
    </div>
    <div>Et exercitationem expedita harum, itaque mollitia nisi non odit porro, quia quibusdam quis repellendus saepe
        soluta. Adipisci atque, delectus doloremque ea fugit magni necessitatibus quas qui quibusdam rem tempore vero.
    </div>
    <div>Consequuntur corporis cumque delectus dolores mollitia natus necessitatibus nulla placeat quos recusandae rem
        saepe sapiente similique sint sit, ut, voluptates! Deleniti dolor eaque earum minima odit perspiciatis rem
        similique tenetur!
    </div>
    <div>Alias commodi consequatur deserunt dignissimos earum, error exercitationem inventore iure, minima natus
        nesciunt perferendis quaerat quis rerum totam ullam vel vero. Dolorum enim libero necessitatibus optio, possimus
        provident rerum voluptatem!
    </div>
    <div>A accusamus ad adipisci amet assumenda atque, consequatur facere fuga inventore laboriosam libero minima,
        molestias nemo nulla perspiciatis, recusandae reiciendis repellendus sapiente sunt totam. A dicta eos fugiat
        iste rem?
    </div>
    <div>Adipisci aliquam atque corporis cupiditate dicta, dignissimos dolor dolore dolorum ea eaque eligendi enim
        excepturi fuga fugit incidunt inventore iure libero nihil, numquam perferendis quo saepe suscipit temporibus
        veritatis vitae.
    </div>
    <div>Consequatur consequuntur ipsum iure odit porro. Ab, accusantium alias asperiores atque blanditiis cum cumque
        deserunt eos illo inventore libero minima molestiae molestias quas recusandae sapiente similique sunt veniam
        voluptas voluptatum.
    </div>
    <div>A adipisci aliquid aperiam blanditiis consequatur culpa delectus dolor enim exercitationem, hic id inventore
        ipsum laborum magnam magni molestias nesciunt nisi nobis optio quibusdam quo quod, rem soluta totam voluptatem.
    </div>
    <div>Aperiam consectetur consequatur deleniti distinctio dolorem doloremque, eaque eius est et exercitationem
        expedita ipsam laborum molestiae natus nostrum placeat quam quidem, quis quisquam reiciendis sit sunt velit
        voluptas voluptate voluptatum.
    </div>
    <div>Alias animi beatae culpa delectus deleniti distinctio dolore dolorem ea eveniet expedita, facilis magni minus
        natus non nulla porro quae quo recusandae sed sint sit tenetur unde velit vitae voluptate?
    </div>
    <div>Ad, animi atque dignissimos dolorum ea explicabo hic impedit in incidunt inventore iure odio officia optio
        perferendis perspiciatis porro, possimus provident qui quibusdam quo quod repellendus sint soluta sunt,
        voluptas?
    </div>
    <div>Odio, perspiciatis, voluptatum. Accusamus aut beatae, dicta laudantium maxime natus ratione totam! Dolorem
        doloremque odio odit perspiciatis ratione tempore voluptate voluptates! Atque aut culpa deserunt ipsam nam
        possimus qui quibusdam?
    </div>
    <div>Iusto nihil, odio recusandae repellendus repudiandae rerum sequi tenetur. Accusamus ad alias consectetur
        debitis delectus dolore dolorum eius expedita illo incidunt minus necessitatibus nemo quidem quos rem, sunt
        ullam voluptatem!
    </div>
    <div>A ad aliquid, architecto assumenda cum, cumque cupiditate dignissimos distinctio doloremque enim esse hic
        ipsum, labore natus nihil omnis perferendis quasi quo reprehenderit repudiandae rerum sequi tempora ut vitae
        voluptatibus?
    </div>
    <div>A aliquid consequatur deleniti deserunt dicta dolore eaque esse fugit illo, itaque laborum magni maxime
        necessitatibus neque nihil odio officiis placeat quo quod repellat repudiandae saepe tempora temporibus veniam
        voluptas.
    </div>
    <div>Accusantium, beatae consectetur cupiditate dicta distinctio ea esse excepturi fuga fugiat inventore magnam
        molestiae obcaecati optio placeat quos repellendus, reprehenderit saepe, sunt suscipit voluptatum. Consequatur
        fuga quasi rem ut velit?
    </div>
    <div>Animi beatae commodi corporis dolorum, est, excepturi explicabo fuga hic libero necessitatibus quae quibusdam
        ut veritatis voluptatibus voluptatum? Architecto, dignissimos facilis. Amet cumque eos excepturi fuga impedit
        nam nostrum pariatur?
    </div>
    <div>Animi blanditiis cumque distinctio excepturi illo, laborum magni modi, placeat praesentium quasi qui quidem
        quis sequi? Debitis deserunt dignissimos dolorem eos inventore, ipsa nemo obcaecati rerum, suscipit vel veniam
        voluptates?
    </div>
</div>
</body>
</html>